<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 48 48"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M20.927 44.495h6.269a12.23 12.23 0 0 1-2.242-7.06c0-6.518 5.089-11.853 11.512-12.321-.09-4.803-2.96-9.06-7.38-10.975l-3.433.004.85 2.561a.894.894 0 0 1-.57 1.132.857.857 0 0 1-.28.048.906.906 0 0 1-.857-.616l-1.04-3.126h-2.903l-1.04 3.126a.897.897 0 0 1-1.137.568.895.895 0 0 1-.57-1.132l.85-2.562h-3.463c-4.51 1.937-7.412 6.297-7.412 11.202v1.241h9.525c1.798 0 3.421 1.247 3.695 3.014a3.488 3.488 0 0 1-1.189 3.2 3.54 3.54 0 0 1 1.228 2.657 3.49 3.49 0 0 1-1.228 2.658 3.54 3.54 0 0 1 1.228 2.658 3.49 3.49 0 0 1-1.228 2.658c.339.31.609.664.815 1.065Z" data-follow-fill="#FF7C1E" :fill="_fill"/><path d="M1.77 37.223h15.89c.884 0 1.708-.6 1.847-1.469a1.77 1.77 0 0 0-1.75-2.061H1.872c-.883 0-1.708.6-1.846 1.468a1.769 1.769 0 0 0 1.746 2.062ZM.025 29.846a1.775 1.775 0 0 0 1.749 2.068h15.99c1.08 0 1.93-.962 1.75-2.068-.143-.869-.967-1.469-1.847-1.469L7.2 28.374H1.87c-.882 0-1.698.6-1.846 1.472ZM31.07.731A.525.525 0 0 0 30.584 0l-16.56.003a.525.525 0 0 0-.487.731l2.464 5.646h3.019l-.931-3.446a.9.9 0 0 1 1.74-.468L20.89 6.38h2.828l1.063-3.914a.91.91 0 0 1 1.105-.632.9.9 0 0 1 .635 1.1L25.59 6.38h3.018L31.07.731ZM16.318 8.17H28.29v4.177H16.318V8.17ZM1.77 47.867h15.89c.884 0 1.708-.6 1.847-1.468a1.775 1.775 0 0 0-1.75-2.068H1.88c-.882 0-1.707.6-1.845 1.468a1.76 1.76 0 0 0 1.736 2.068Zm0-5.315h15.89c.884 0 1.708-.6 1.847-1.468a1.775 1.775 0 0 0-1.75-2.068L1.88 39.013c-.882 0-1.707.6-1.845 1.468a1.762 1.762 0 0 0 1.736 2.071Zm35.616-15.694c-.01 0-.01 0 0 0-6.004 0-10.851 4.972-10.62 10.99.216 5.441 4.732 9.939 10.192 10.144C43.01 48.222 48 43.395 48 37.428c.006-5.825-4.76-10.57-10.614-10.57Zm.89 16.825v1.436a.897.897 0 0 1-.9.895.897.897 0 0 1-.898-.895v-1.288c-1.253-.049-2.41-.353-3.215-.83l.57-1.726c.603.395 1.624.789 2.648.87v-4.3c-1.93-.795-2.854-1.962-2.854-3.347 0-1.61 1.057-2.972 2.854-3.457v-.904c0-.493.403-.894.899-.894s.899.4.899.894v.722c1.13.057 2.12.378 2.754.747l-.57 1.65a5.09 5.09 0 0 0-2.184-.688v3.824c2.11.821 3.192 1.895 3.192 3.726-.003 1.783-1.156 3.129-3.196 3.565Z" data-follow-fill="#FF7C1E" :fill="_fill"/><path d="M38.276 38.653v3.226c.667-.327.99-.904.99-1.558.002-.725-.297-1.225-.99-1.668Zm-2.474-4.418c0 .558.223.943.683 1.28v-2.578c-.441.324-.683.782-.683 1.298Z" data-follow-fill="#FF7C1E" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group3467126 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
